// pages/product/index.js
import {addRecord, getRelatedRecords, updateRecord, deleteRecord, getBladeGroupByBrand, getRubberGroupByBrand} from '../../api/index';
import {cleanObject} from '../../tool/object'
const app = getApp()


Page({
  /**
   * 页面的初始数据
   */
    data: {
        // 我的使用记录组合。
           // 之后可以联动存储产品的封面信息。
        // recordProduct: [],
        // 图片存储前缀
        cloudfileurl: '',

        // 编辑面板索引记录
        editingIndex: -1,        // 编辑中products清单中的数组索引位置，应该是一个数字
        editingProductId: null,  // 编辑中products的云数据 _id。

        // 产品数据
        products: [],
        // products: [  // 例子数据
        //     {
        //         id: 1,
        //         name: '底板套胶组合一',
        //         descipt: '正手强力弧圈，反手弹击',
        //         blade: {coverPath: '../../images/blade_example.jpeg', name: 'vis'},
        //         forehandRubber: {coverPath: '../../images/blade_example.jpeg', name: 'DHS 蓝海绵'},
        //         backhandRubber: {coverPath: '../../images/blade_example.jpeg', name: 'Tenergy 05'},
        //         price: '998',
        //         createDate: '2023-08-15'
        //     },
        //     {
        //         id: 2,
        //         name: '底板套胶组合二',
        //         descipt: '两面弧圈，反手全面',
        //         blade: {coverPath: '../../images/blade_example.jpeg', name: 'vis'},
        //         forehandRubber: {coverPath: '../../images/blade_example.jpeg', name: 'DHS 蓝海绵'},
        //         backhandRubber: {coverPath: '../../images/blade_example.jpeg', name: 'Rozena'},
        //         price: '899',
        //         createDate: '2023-09-01'
        //     }
        // ],
        showDialog: false,
        newProduct: {
            name: '新组合',
            bladeName: '',
            bladeId: '',  /// 记录底板的 id
            forehandRubberName: '',
            forehandRubberId: '', // 记录正手胶皮_id
            backhandRubberName: '',
            backhandRubberId: '', // 记录反手胶皮_id
            price: '',
            descript: ''
        },
        dialogButtons: [
            { text: '取消', handler: 'hideCreateDialog' },
            { text: '创建', handler: 'createNewProduct' }
        ],

        // 底板选择器相关
        bladeMultiIndex: [-1, -1],
        bladeMultiArray: [['红双喜', '蝴蝶'],['aaa', 'bbb']],   // 第一个数组对应第一列，第二个数组对应第二列
        bladeCollect: [
          {
              brandName: '红双喜', 
              blades: [
                  {_id: '001', name: 'aaa'},
                  {_id: '002', name: 'bbb'}
              ]
          },
          {
              brandName: '蝴蝶', 
              blades: [
                  {_id: '003', name: 'ccc'},
                  {_id: '004', name: 'ddd'}
              ]
          },
        ],

        // 正手胶皮选择器相关
        forehandRubberMultiIndex: [-1, -1],
        forehandRubberMultiArray: [['斯蒂卡', '亚萨卡'],['DNA赤龙', 'DNA白金']],
       
        // 反手胶皮选择器相关
        backhandRubberMultiIndex: [-1, -1],
        backhandRubberMultiArray: [['斯蒂卡', '亚萨卡'],['DNA赤龙', 'DNA白金']],

         // 所有胶皮可选清单。
         // 选择器将从所有的产品中进行选择胶皮名称不再从收藏中选择。
        rubberCollect: [ 
          { brandName: '斯蒂卡', 
            rubbers: [
                {_id: '101', name: 'DNA赤龙'},
                {_id: '102', name: 'DNA白金'}
            ] },
          { brandName: '亚萨卡', 
            rubbers: [
                {_id: '103', name: '飞龙'},
                {_id: '104', name: '骁龙'}
            ] },
        ],
        // 编辑窗口
        isEditMode: false,

        // 用户登录
        hasUserInfo: false,
        userInfo: {}
    },

    /* 弹窗相关 */
    // 显示创建组合对话框
    // 修改showCreateDialog方法中的确认按钮绑定
    showCreateDialog: function() {
        this.setData({
            showDialog: true,
            editingId: null,
            newProduct: {
                name: '新组合',
                price: '',
                descript: '',
                bladeId: '',
                bladeName: '',
                forehandRubberId: '',
                forehandRubberName: '',
                backhandRubberId: '',
                backhandRubberName: '',
            },
            // 设置选择器索引为-1，表示未选择
            bladeMultiIndex: [-1, -1],
            forehandRubberMultiIndex: [-1, -1],
            backhandRubberMultiIndex: [-1, -1],
            dialogButtons: [
                { text: '取消', handler: 'hideCreateDialog' },
                { text: '创建', handler: 'createNewProduct' }
            ],
            isEditMode: false
        });
    },
    // 隐藏创建组合对话框
    hideCreateDialog: function() {
        this.setData({
            showDialog: false
        });
    },

    // 创建新组合，点击按钮触发
    createNewProduct: async function() {
        const newProduct = this.data.newProduct;
        
        // default name set as '新组合'
        if (!newProduct.name) newProduct.name = '新组合'

        // 新组合的信息
        const product = {
          name: newProduct.name,
          bladeName: newProduct.bladeName,
          bladeId: newProduct.bladeId, // 记录底板ID
          forehandRubberName: newProduct.forehandRubberName,
          forehandRubberId: newProduct.forehandRubberId, // 记录正手胶皮ID
          backhandRubberName: newProduct.backhandRubberName,
          backhandRubberId: newProduct.backhandRubberId, // 记录反手胶皮ID
          price: newProduct.price,
          descript: newProduct.descript,
        };

        // 提交新请求数据
        let newRecord = {
          name: product.name,
          blade: product.bladeId === ""? undefined: product.bladeId,
          forehandRubber: product.forehandRubberId === ""? undefined: product.forehandRubberId,
          backhandRubber: product.backhandRubberId === ""? undefined: product.backhandRubberId 
        }
        // 网络请求创建新组合记录
        try {
          newRecord = cleanObject(newRecord)
          console.log('new')
          console.log(newRecord)
          let rs = await addRecord(newRecord)
          
          if(rs.success) {
            this.setData({
              products: [...this.data.products, product]
            });

            wx.showToast({
              title: '创建成功',
              icon: 'success'
            });

            // 暂时先手动刷新下数据，因为封面信息在提交更新后，获取不到，因此无法直接本地更新信息。
            let {result: RelatedRecords} = await getRelatedRecords();
            if(RelatedRecords && RelatedRecords.list) {
              this.setData({
                products: RelatedRecords.list
              })
            }
          }

        } catch (error) {
          console.error("创建失败:", error)
          wx.showToast({
            title: '创建失败',
            icon: 'fail'
          });
          throw error // 选择抛出错误。
        } finally {
          this.setData({
            showDialog: false
          })
        }
    },

    // 显示编辑对话框
    showEditDialog: function(e) {
        const id = e.currentTarget.dataset.id;
        const editIndex = e.currentTarget.dataset.index; // 直接获取产品的索引
        const product = this.data.products[editIndex];
 
        if (!product) return;

        this.setData({
            showDialog: true,
            editingId: id,           // 这个值是前端视图下方便的索引记录
            editingIndex: editIndex, // 记录products当前编辑的数组索引下标。
            editingProductId: product._id,   // 记录实际产品的 _id
            newProduct: {
                _id: product._id, 
                name: product.name,
                bladeId: product.blade?._id,
                bladeName: product.blade?.name,
                forehandRubberId: product.forehandRubber?._id,
                forehandRubberName: product.forehandRubber?.name,
                backhandRubberId: product.backhandRubber?._id,
                backhandRubberName: product.backhandRubber?.name,
                price: product.price,
                descript: product.descript
            },

            // 如果未空，那么返回0值。
            bladeMultiIndex: this.calculateBladeIndex(product.blade?.name),
            forehandRubberMultiIndex: this.calculateRubberIndex(product.forehandRubber?.name),
            backhandRubberMultiIndex: this.calculateRubberIndex(product.backhandRubber?.name),
            isEditMode: true
        });

        
        // 修改对话框确认按钮的绑定
        this.setData({
            dialogButtons: [
                { text: '取消', handler: 'hideCreateDialog' },
                { text: '保存', handler: 'updateProduct' }
            ]
        });
    },

    // 计算底板的选择器索引
    calculateBladeIndex: function(bladeName) {
        // 这里需要根据bladeName在bladeCollect中查找对应的索引

        if(!bladeName) return [-1, -1];
        for (let i = 0; i < this.data.bladeCollect.length; i++) {
            const brand = this.data.bladeCollect[i];
            const index = brand.blades.findIndex(blade => blade.name === bladeName);
            if (index !== -1) {
                return [i, index];
            }
        }
        return [-1, -1];
    },

    // 计算胶皮的选择器索引
    calculateRubberIndex: function(rubberName) {
        // 类似calculateBladeIndex，但在rubbers中查找
        if(rubberName) {
          for (let i = 0; i < this.data.rubberCollect.length; i++) {
              const brand = this.data.rubberCollect[i];
              const index = brand.rubbers.findIndex(rubber => rubber.name === rubberName);
              if (index !== -1) {
                  return [i, index];
              }
          }
        }
        return [-1, -1];
    },

    // 更新已有产品, use variable name as 'newProduct' make code clear
    updateProduct: async function() {
        const newProduct = this.data.newProduct;
        
        if (!newProduct?._id) {
            wx.showToast({
                title: '获取已有组合错误 123',
                icon: 'none'
            });
            return;
        }
        
        try {
          // 提交网络请求，返回结果以及id 才能说明成功
          let nowId = newProduct._id;

           // 数据转换：前端结构 -> 数据库结构
          let recordData = {
            name: newProduct.name,
            blade: newProduct.bladeId,
            forehandRubber: newProduct.forehandRubberId,
            backhandRubber: newProduct.backhandRubberId,
            price: newProduct.price,
            descript: newProduct.descript,
          };
          
          // 清除无效值。
          recordData = cleanObject(recordData)

          let res = await updateRecord(nowId, recordData);

          if(res.success) {
            // 直接使用预先记录的索引
            const editIndex = this.data.editingIndex;
            if (editIndex !== -1) {
              this.setData({
                  [`products[${editIndex}]`]: {
                      ...this.data.products[editIndex],
                      name: newProduct.name,
                      price: newProduct.price,
                      descript: newProduct.descript,
                      bladeName: newProduct.bladeName,
                      bladeId: newProduct.bladeId,
                      forehandRubberName: newProduct.forehandRubberName,
                      forehandRubberId: newProduct.forehandRubberId,
                      backhandRubberName: newProduct.backhandRubberName,
                      backhandRubberId: newProduct.backhandRubberId,
                  }
              });

              wx.showToast({
                title: '修改成功',
                icon: 'success'
              });

              // 暂时先手动刷新下数据，因为封面信息在提交更新后，获取不到，因此无法直接本地更新信息。
              let {result: RelatedRecords} = await getRelatedRecords();
              if(RelatedRecords && RelatedRecords.list) {
                this.setData({
                  products: RelatedRecords.list
                })
              }

            }
          }
        } catch(error) {
          wx.showToast({
            title: '修改失败',
            icon: 'fail'
          });
          throw error;
        } finally {
          // 无论修改成功或者失败，都是关闭窗口。
          this.setData({
            showDialog: false,
            editingId: null,
            editingIndex: -1
          })
        }
        
    },

    // 删除已有组合
    handleDelete: function() {
        const that = this;
        const recordId = this.data.editingProductId;  // 云数据库记录的 _id
        const editingIndex = this.data.editingIndex;     // 编辑中的products数组索引位置
        
        if (!recordId || editingIndex === -1) {
          wx.showToast({
              title: '获取记录信息失败',
              icon: 'none'
          });
          return;
        }
  
        // 显示确认对话框
        wx.showModal({
            title: '确认删除',
            content: '',
            confirmText: '删除',
            confirmColor: '#ff4f4f',
            cancelText: '取消',
            async success(res) {
                // 用户确认删除
                if (res.confirm) {
                  try{

                    // 网络请求删除记录
                    let rs = await deleteRecord(recordId)

                    if(rs.success) {
                      // 性能不好的过滤方法
                      //   const updatedProducts = that.data.products.filter(
                      //     product => product.id !== editingId
                      //   );

                      // 直接操作products数组的索引位置，清空为null。
                      // that.setData({
                      //   [`products[${editingIndex}]`]: null, //这里没效果。
                      // }); 

                      wx.showToast({
                        title: '删除成功',
                        icon: 'success',
                        duration: 1500
                      });
                      
                      // 直接刷新数据。
                      // 暂时先手动刷新下数据，因为封面信息在提交更新后，获取不到，因此无法直接本地更新信息。
                      let {result: RelatedRecords} = await getRelatedRecords();
                      if(RelatedRecords && RelatedRecords.list) {
                        that.setData({
                          products: RelatedRecords.list
                        })
                      }
                    }
                  } catch(error) {
                    console.log(error)
                    wx.showToast({
                        title: '删除失败',
                        icon: 'none'
                    });
                  } finally {
                    that.setData({
                      showDialog: false,
                      editingId: null,
                      editingIndex: -1,
                      editingProductId: null
                    })
                  }               
                }
            }
        });
    },

    /* 表单编辑相关 */
    // 表单输入变更值，事件绑定
    onNameInputChange: function(e) {
      const value = e.detail.value;
      this.setData({
          'newProduct.name': value
      });
    },

    onDescriptInputChange: function(e) {
      const value = e.detail.value;
      this.setData({
          'newProduct.descript': value
      });
    },

    /* 选择器相关 */
    // 底板变更选择项目事件。
    bindMultiPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      const [brandIndex, bladeIndex] = e.detail.value;
      const bladeCollect = this.data.bladeCollect;
      
      // 获取选中的底板对象
      const selectedBlade = bladeCollect[brandIndex]?.blades[bladeIndex];
      
      this.setData({
          bladeMultiIndex: e.detail.value,
          'newProduct.bladeName': selectedBlade?.name || '',
          'newProduct.bladeId': selectedBlade?._id || ''
      });
    },
  
    bindMultiPickerColumnChange: function (e) {
      console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
      var data = {
        bladeMultiArray: this.data.bladeMultiArray,
        bladeMultiIndex: this.data.bladeMultiIndex
      };
      var bladeCollect = this.data.bladeCollect;
      data.bladeMultiIndex[e.detail.column] = e.detail.value;
      switch (e.detail.column) {
        // 当前修改第一列的值内容时。
        case 0:
          // 设置第二列的可选值内容。
          const selectedBrandIndex = data.bladeMultiIndex[0];
          if (selectedBrandIndex >= 0 && selectedBrandIndex < bladeCollect.length) {
              // 从blades对象数组中提取name属性组成新的数组
              data.bladeMultiArray[1] = bladeCollect[selectedBrandIndex].blades.map(blade => blade.name);
          } else {
              data.bladeMultiArray[1] = [];
          }
          data.bladeMultiIndex[1] = 0;
          break;
      }
      this.setData(data);
    },

    // 正手胶皮变更选择项目事件。
    bindForehandRubberMultiPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      const [brandIndex, rubberIndex] = e.detail.value;
      const rubberCollect = this.data.rubberCollect;
      
      // 获取选中的胶皮对象
      console.log(rubberCollect)

      const selectedRubber = rubberCollect[brandIndex]?.rubbers[rubberIndex];
      
      this.setData({
          forehandRubberMultiIndex: e.detail.value,
          'newProduct.forehandRubberName': selectedRubber?.name || '',
          'newProduct.forehandRubberId': selectedRubber?._id || ''
      });
    },
  
    bindForehandRubberMultiPickerColumnChange: function (e) {
      console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
      var data = {
        forehandRubberMultiArray: this.data.forehandRubberMultiArray,
        forehandRubberMultiIndex: this.data.forehandRubberMultiIndex
      };
      var rubberCollect = this.data.rubberCollect;
      data.forehandRubberMultiIndex[e.detail.column] = e.detail.value;
      switch (e.detail.column) {
        // 当前修改第一列的值内容时。
        case 0:
          // 设置第二列的可选值内容
          const selectedBrandIndex = data.forehandRubberMultiIndex[0];
          if (selectedBrandIndex >= 0 && selectedBrandIndex < rubberCollect.length) {
              // 从rubbers对象数组中提取name属性组成新的数组
              data.forehandRubberMultiArray[1] = rubberCollect[selectedBrandIndex].rubbers.map(rubber => rubber.name);
          } else {
              data.forehandRubberMultiArray[1] = [];
          }
          data.forehandRubberMultiIndex[1] = 0;
          break;
      }
      this.setData(data);
    },


    // 反手胶皮变更选择项目事件。
    bindBackhandRubberMultiPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      const [brandIndex, rubberIndex] = e.detail.value;
      const rubberCollect = this.data.rubberCollect;
      
      // 获取选中的胶皮对象
      const selectedRubber = rubberCollect[brandIndex]?.rubbers[rubberIndex];
      
      this.setData({
          backhandRubberMultiIndex: e.detail.value,
          'newProduct.backhandRubberName': selectedRubber?.name || '',
          'newProduct.backhandRubberId': selectedRubber?._id || ''
      });
    },
  
    bindBackhandRubberMultiPickerColumnChange: function (e) {
      console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
      var data = {
        backhandRubberMultiArray: this.data.backhandRubberMultiArray,
        backhandRubberMultiIndex: this.data.backhandRubberMultiIndex
      };
      var rubberCollect = this.data.rubberCollect;
      data.backhandRubberMultiIndex[e.detail.column] = e.detail.value;
      switch (e.detail.column) {
        // 当前修改第一列的值内容时。
        case 0:
          // 设置第二列的可选值内容
          const selectedBrandIndex = data.backhandRubberMultiIndex[0];
          if (selectedBrandIndex >= 0 && selectedBrandIndex < rubberCollect.length) {
              // 从blades对象数组中提取name属性组成新的数组
              data.backhandRubberMultiArray[1] = rubberCollect[selectedBrandIndex].rubbers.map(rubber => rubber.name);
          } else {
              data.backhandRubberMultiArray[1] = [];
          }
          data.backhandRubberMultiIndex[1] = 0;
          break;
      }
      this.setData(data);
    },

    /**
     * 用户信息相关
     */
    onGetUserInfo: function(e) {
        if (e.detail.userInfo) {
            // 用户点击了允许授权
            this.setData({
                hasUserInfo: true,
                userInfo: e.detail.userInfo
            });
            
            // 可以在这里将用户信息发送到后端服务器
            // this.sendUserInfoToServer();
        } else {
            // 用户点击了拒绝授权
            wx.showToast({
                title: '您拒绝了授权',
                icon: 'none'
            });
        }
    },
    
    // 如果需要将用户信息发送到服务器
    // sendUserInfoToServer: function() {
    //     wx.login({
    //         success: res => {
    //             if (res.code) {
    //                 // 这里可以将code和userInfo发送到您的后端服务器
    //                 // 服务器可以通过code获取openid和session_key
    //                 wx.request({
    //                     url: '您的服务器接口地址',
    //                     method: 'POST',
    //                     data: {
    //                         code: res.code,
    //                         userInfo: this.data.userInfo
    //                     },
    //                     success: (res) => {
    //                         // 处理服务器返回的数据
    //                         console.log('登录成功', res.data);
    //                     }
    //                 });
    //             } else {
    //                 console.log('登录失败！' + res.errMsg);
    //             }
    //         }
    //     });
    // }


    /**
     * 生命周期函数--监听页面加载
     */
    async onLoad(options) {
      // 检查是否已授权
      wx.getSetting({
        success: res => {
          if (res.authSetting['scope.userInfo']) {
            // 已经授权，可以直接获取用户信息
            wx.getUserInfo({
                success: res => {
                    console.log("当前授权信息：", res)
                    this.setData({
                        hasUserInfo: true,
                        userInfo: res.userInfo
                    });
                    app.globalData.hasUserInfo = true;
                    app.globalData.userInfo =  res.userInf;
                }
            });
          }
        }
      });

      // 初始化图片存储信息
      this.setData({
        cloudfileurl: getApp().globalData.cloudfileurl 
      })
      
      // 初始化数据，获取底板选择器数据
      let {result: brandBlades} = await getBladeGroupByBrand()
      // 处理返回的数据结构，确保bladeMultiArray正确生成
      if (brandBlades && brandBlades.list) {
        const bladeCollect = brandBlades.list;
        const bladeMultiArray = [
            bladeCollect.map(item => item.brandName), // 第一列：品牌名称
            bladeCollect.length > 0 ? bladeCollect[0].blades.map(blade => blade.name) : [] // 第二列：第一个品牌的刀具名称
        ];
        // 更新底板选择器数据。
        this.setData({
            bladeCollect: bladeCollect,
            bladeMultiArray: bladeMultiArray
        });
      }

      // 获取品牌分组的胶皮数据
      let {result: brandRubbers} = await getRubberGroupByBrand()

      // 处理返回的数据结构，确保bladeMultiArray正确生成
      if (brandRubbers && brandRubbers.list) {
        const rubbers = brandRubbers.list;
        const forehandRubberMultiArray = [
            rubbers.map(item => item.brandName), // 第一列：品牌名称
            rubbers.length > 0 ? rubbers[0].rubbers.map(rubber => rubber.name) : [] 
        ]; 
        // 更新胶皮选择器数据。
        this.setData({
          rubberCollect: rubbers,
          forehandRubberMultiArray: forehandRubberMultiArray,
          backhandRubberMultiArray: forehandRubberMultiArray   // 将正反手胶皮设置为一样的。
        });
      }

      // 获取关联表的组合记录数据
      // getRelatedRecords 
      let {result: RelatedRecords} = await getRelatedRecords();
      if(RelatedRecords && RelatedRecords.list) {
        this.setData({
          products: RelatedRecords.list
        })
      }
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    async onReady() {
      // 测试添加数据
    //   console.log("测试新添加球拍组合数据")
    //   let rs = await addRecord()
    //   console.log(rs)
    
      // console.log("查询所有数据")
      // let rs2 = await getRecords()
      // console.log(rs2)
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})